<template>
  <!-- 系统消息 -->
  <div>
    <div style="width:224px">
      <!-- <el-row :span="20">
        <el-col :col="24">
          <el-input
            v-model="input2"
            placeholder="元动未来"
            suffix-icon="el-icon-search"
          />
        </el-col>
      </el-row> -->
    </div>
    <div style="margin-top:22px;">
      <div v-if="messageList.length>0">
        <ul v-loading="loading" class="message_list">
          <li v-for="(item,index ) in messageList" :key="index" class="message_item">
            <span class="item_sum">{{ index+1 }}</span><span>{{ item.content }}</span><span class="gl_fr">{{ item.createTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </li>
        </ul>
      </div>
      <div v-else class="gl_noData">
        <p>暂无数据</p>
      </div>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        layout="total,sizes,prev,pager,next,jumper"
        :total="totalPage"
        :page-size="page.MaxResultCount"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>
<script>
import { api_GET_MessageGetReceivingMessages } from '@/extend/api/swaggerApi/chat.js';
import { Page } from '@/lib/form/common';

export default {
  name: 'System',
  data() {
    return {
      page: new Page(),
      input2: '',
      loading: false,
      totalPage: 0,
      currentPage: 1,
      messageList: []
    };
  },
  created() {
    this.getMessageList();
  },
  methods: {
    getMessageList() {
      this.loading = true;
      api_GET_MessageGetReceivingMessages().then(res => {
        console.log(res);
        this.messageList = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(res => {
        this.loading = false;
      });
    },
    sizeChange: function(MaxResultCount) {
      this.Page.MaxResultCount = MaxResultCount;
      this.findList();
    },
    pageIndexChange(currentPage) {
      this.currentPage = currentPage;
      this.Page.SkipCount = (currentPage - 1) * this.Page.MaxResultCount;
      this.findList();
    }
  }
};
</script>
<style>
.message_list{
  border-bottom:1px solid #e8e8e8;
}
.message_item{
  color:#595959;
  line-height:52px;
  padding:0 30px;
  font-size:14px;
  border-top:1px solid #e8e8e8;
}
.item_sum{
  display:inline-block;
  width:42px
}
</style>

